<template>
    <CommonCard title="今日用户" :value="numberFormat(orderUser)">
        <div ref="barChartRef" style="width:100%;height:100%"></div>
        <template #footer>
            <div>退货率 &nbsp;<span class="emphasis">{{ numberFormat(returnRate) }}%</span></div>
        </template>
    </CommonCard>
</template>
   
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
    name: 'TodayUsers'
});
</script>
<script lang="ts" setup>
import CommonCard from './CommonCard.vue';
import * as echarts from 'echarts'
import type { EchartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
import { computed, watch } from 'vue'

// 交易用户数
const orderUser = computed(() => reportDataStore.reportData.orderUser)
// 退货率
const returnRate = computed(() => reportDataStore.reportData.returnRate)
// Y轴数据
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
// x轴数据
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)

//store数据
const reportDataStore = useReportDataStore()
//格式化数据方法
const { numberFormat, moneyFormat } = useFormat()
const barChartRef = ref(); //获取页面元素
let barChart: EChartsType; //实例对象


const getOption = () => {
    return {
        xAxis: {
            show: false,
            // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            data: orderUserTrendAxis.value
        },
        yAxis: {
            show: false
        },
        tooltip: {},
        grid: {
            left: 0,
            right: 0,
        },
        series: {
            type: 'bar',
            // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
            data: orderUserTrend.value
        }
    }
}

onMounted(() => {
    barChart = echarts.init(barChartRef.value)
    // barChart && barChart.setOption(getOption())
    window.addEventListener('resize', () => {
        barChart && barChart.resize()
    })
})

//添加监视
watch(orderUserTrend, () => {
    barChart && barChart.setOption(getOption())
})


</script>
   
<style scoped></style>